<template>
    <div id="Idea">
        <div class="content w clearfix">
            <div class="my">
                <div class="userHeader"></div><!--这个是头像-->
                <div class="info">
                    <p>namename</p>
                    <p style="margin-top: 3px; font-size: 14px;">第106名</p>
                </div>
                <p class="love">
                    <span class="span3">❤</span>
                    &nbsp;&nbsp;
                    <span class="span4">20</span>
                </p>
            </div>
            <div class="rankList">
               <div>
                   <table v-for="(item,index) in rank ">
                       <tr>
                           <td style="color:#eec710">{{index+1}}</td>
                           <td>
                               <div class="userHeader1"></div><!--这个是头像-->
                           </td>
                           <td>{{item.name}}</td>
                           <td>
                               <span class="span1">❤</span>
                               &nbsp;&nbsp;
                               <span class="span2">{{item.like}}</span>
                           </td>
                       </tr>
                   </table>

               </div>



            </div>
            <br><br>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                rank:[]
            }
        },
        mounted(){
            var _this = this
            this.http.post('/users/rank').then(function (res) {
                _this.rank = res.data;
            })
        }
    }
</script>

<style scoped>
    .content {
        background-color: #FAFAFA;
    }

    .content .top {
        /*float: left;*/
    }

    .people-img {
        padding-top: 30px;
        width: 960px;
        height: 180px;
        text-align: center;

    }

    .content .top p {
        height: 20px;
        /*padding-top: 210px;*/
        font-size: 24px;
        /*  background: #FAFAFA url(../assets/images/__idea/u29.jpg) center center no-repeat;*/
        text-align: center;
    }

    .content ul {
        float: left;
        width: 704px;
        border: 1px solid #D9D9D9;
        list-style: none;
        margin: 0 auto;
        margin-top: 40px;
        margin-left: 134px;
        margin-right: 134px;
        border-radius: 5px;
    }

    .content ul li {

        float: left;
        line-height: 51px;
        padding: 5px 0 5px 0;
        width: 175px;
        font-size: 20px;
        background-color: white;

    }

    .content ul li a {
        display: block;
        line-height: 51px;
        text-align: center;
        border-right: 1px solid #E9E9E9;
    }

    .content ul li a:hover {

    }

    .content .p28 {
        margin: 20px 0;
        float: right;
        font-family: "微软雅黑";
        font-size: 20px;
        margin-right: 85px;

    }

    .content .list {
        float: left;
        width: 787px;
        height: 154px;
        border: 1px solid #D9D9D9;
        margin: 0 100px 20px 100px;
        font-family: "SimSun", "宋体";
        font-weight: bold;
    }

    .content .list p {
        float: left;
        margin-left: 20px;
        margin-right: 100px;
        font-size: 18px;
        padding-top: 20px;

        /*font;*/
    }

    .content .list .book {
        float: left;
        width: 200px;
        margin-top: 80px;
        font-size: 20px;
        font-weight: bold;
    }

    .content .book .number {
        text-align: right;
        font-weight: normal;
        font-size: 14px;
    }

    .content dl {
        float: right;
        padding-top: 50px;
        padding-right: 60px;
        font-size: 18px;

    }

    .content dl dd {
        padding-left: 30px;
        padding-top: 15px;
    }

    .content dt .ing {
        color: red;
    }

    .content dt .succeed {
        color: green;
    }

    .my{
        width: 760px;
        height: 60px;
        border: 1px solid #D9D9D9;
        margin: 10px auto;
    }

    .userHeader{
        width: 40px;
        height: 40px;
        /*border: 1px solid black;*/
        border-radius: 25px;
        background-color: black;
        margin-left: 60px;
        margin-top: 10px;
        display: block;
    }

    .info{
        width: 80px;
        height: 40px;
        font-size: 16px;
        margin-left: 110px;
        margin-top: -40px;
        display: block;
    }

    .love{
        height: 40px;
        color: #fc7a7a;
        margin-top: -28px;
        float: right;
        margin-right: 60px;
    }

    .span1{
        height: 40px;
        font-size:40px;
    }

    .span2{
        height: 40px;
        font-size: 30px;
        vertical-align: top;
        padding-top: -5px;
    }

    .rankList{
        width: 760px;
        border: 1px solid #D9D9D9;
        margin: 10px auto;
    }

    table{
        width: 760px;
        height: 55px;
    }
    tr {
        border: 1px solid rgba(0, 0, 0, 0.44);
    }
    tr td:first-child{
        width: 50px;
        text-align: right;
        font-size:30px;
        color: black;
    }

    tr td:nth-child(2){
        width: 25px;
        height: 25px;
    }

    .userHeader1{
        width: 40px;
        height: 40px;
        /*border: 1px solid black;*/
        border-radius: 25px;
        background-color: black;
        margin-left: 10px;
        margin-top: 3px;
        display: block;
    }

    tr td:nth-child(3){
        width: 490px;
        padding-left: 18px;
        font-size: 16px;
    }

    tr td:nth-child(4){
        color: #fc7a7a;
        padding-top: 15px;
    }

    .span3{
        height: 40px;
        font-size:40px;
    }

    .span4{
        height: 40px;
        font-size: 30px;
        vertical-align: top;
        padding-top: -5px;
    }

    hr{
        border: 1px solid #D9D9D9;
        width: 720px;
        margin: 5px auto;
    }
</style>
